
<template>
  <div>
    <Binds :duration="0.8" class="textC" :immediately="true" ref="bds" text="测试百叶窗Binds" @onStart="start"
    @onEnd="end"
    >11</Binds>
  </div>

  <div>
    <Inclined ref="inclinedEl" 
    direction="right_bottom"
    @onStart="start"
    @onEnd="end">
      <div>
        测试整体斜对角出现
      </div>
      <div>
        这是一段内容这是一段内容这是一段内容
      </div>
      <div>
        这是一段内容这是一段内容这是一段内容
      </div>
    </Inclined>
  </div>

  <div>
    <Board ref="BoardEl" text="测试棋盘效果">1</Board>
  </div>

  <div style="padding:0 0 0 300px;">
    <Fall ref="FallEl"  text="测试雨滴掉落效果" model="top" :top="100" :intervalTime="0.1"></Fall>
  </div>

  <div>-----------</div>
  <div>
    这是控制按钮
  </div>
  <div>
    <button @click="clickStart">start</button>
    <button @click="clickPaused">paused</button>
    <button @click="clickRest">rest</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Binds from '../pages/Binds/index';
import Inclined from '../pages/Inclined/index';
import Board from '../pages/Board/index';
import Fall from '../pages/Fall/index';

const bds = ref();
const inclinedEl = ref()
const BoardEl = ref()
const FallEl = ref()
const els = [bds,inclinedEl,BoardEl,FallEl]

const clickStart = () => {
   
  els.forEach(item => {
    item.value.start()
  })
}

const clickPaused = () => {
    els.forEach(item => {
    item.value.paused()
  })
}

const clickRest = () => {
  els.forEach(item => {
    item.value.rest()
  })
}

const start = () => {
  console.log('start')
}

const end = () => {
  console.log('end')
}
</script>

<style lang="less">
.textC{
  color: red;
}

</style>
